<template>
  <view class="fu-index-list">
    <!-- 主列表区域 -->
    <scroll-view 
      class="fu-index-list__body" 
      scroll-y 
      :scroll-into-view="scrollIntoView"
      @scroll="onScroll"
    >
      <slot></slot>
    </scroll-view>
    
    <!-- 右侧索引导航 -->
    <view 
      class="fu-index-list__nav"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    >
      <view 
        v-for="(item, index) in indexes" 
        :key="index"
        class="fu-index-list__nav-item"
        :class="{ 'is-active': currentIndex === item }"
        @tap="onIndexTap(item)"
      >
        {{ item }}
      </view>
    </view>

    <!-- 当前选中的索引提示 -->
    <view v-show="showIndicator" class="fu-index-list__indicator">
      {{ currentIndex }}
    </view>
  </view>
</template>

<script>
/**
 * @description 索引列表组件
 * @property {Array} indexes - 索引数组，默认为 A-Z 字母
 * @event {Function} select - 选择索引时触发
 */
export default {
  name: 'FuIndexList',
  
  props: {
    indexes: {
      type: Array,
      default: () => {
        const indexList = [];
        for (let i = 65; i <= 90; i++) {
          indexList.push(String.fromCharCode(i));
        }
        return indexList;
      }
    }
  },
  
  data() {
    return {
      currentIndex: '',
      scrollIntoView: '',
      showIndicator: false
    }
  },
  
  methods: {
    onTouchStart(e) {
      this.updateTouchIndex(e);
      this.showIndicator = true;
    },
    
    onTouchMove(e) {
      this.updateTouchIndex(e);
    },
    
    onTouchEnd() {
      this.showIndicator = false;
    },

    onIndexTap(index) {
      this.currentIndex = index;
      this.scrollTo(index);
      this.$emit('select', index);
      this.showIndicator = true;
      setTimeout(() => {
        this.showIndicator = false;
      }, 500);
    },
    
    updateTouchIndex(e) {
      const touch = e.touches[0];
      const navEl = this.$el.querySelector('.fu-index-list__nav');
      const navRect = navEl.getBoundingClientRect();
      const percentage = (touch.clientY - navRect.top) / navRect.height;
      const index = Math.floor(percentage * this.indexes.length);
      
      if (index >= 0 && index < this.indexes.length) {
        const currentIndex = this.indexes[index];
        if (this.currentIndex !== currentIndex) {
          this.currentIndex = currentIndex;
          this.scrollTo(currentIndex);
          this.$emit('select', currentIndex);
        }
      }
    },
    
    scrollTo(index) {
      this.scrollIntoView = `index-${index}`;
    },
    
    onScroll(e) {
      // 获取所有索引项
      const items = this.$el.querySelectorAll('.fu-index-list-item');
      const scrollTop = e.detail.scrollTop;
      
      // 找到当前可见的第一个索引项
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        const rect = item.getBoundingClientRect();
        if (rect.top >= 0) {
          const index = item.getAttribute('id').split('-')[1];
          if (this.currentIndex !== index) {
            this.currentIndex = index;
          }
          break;
        }
      }
    }
  }
}
</script>

<style>
.fu-index-list {
  position: relative;
  height: 100%;
}

.fu-index-list__body {
  height: 100%;
}

.fu-index-list__nav {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 20rpx 10rpx;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 20rpx;
  z-index: 999;
}

.fu-index-list__nav-item {
  padding: 4rpx 10rpx;
  font-size: 24rpx;
  color: #fff;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
}

.fu-index-list__nav-item.is-active {
  color: #007aff;
}

.fu-index-list__indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 8rpx;
  font-size: 36rpx;
  z-index: 20;
}
</style> 